<template>
	<view class="personals">
		<view class="header" style="padding-top: 40px;">
			<view class="top-title">
				<view class="title-name">
					个人中心
				</view>
				<view class="title-set" @click="pushs('/pages/mine/set/set')">
					<image src="../../static/my-icon/setting.png" mode=""></image>
				</view>
			</view>
			<view class="top-user">
				<view class="user-image">
					<image src="../../static/my-icon/logo.png" mode=""></image>
				</view>
				<view class="user-name">
					<view class="name">
						R0酱
					</view>
					<view class="name-num" @click="pushs('/pages/mine/my-achievements/my-achievements')">
						🌹 4.8
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view v-for="(item,index) in contentlist" :key="index" class="item" @click="pushs(item.path)">
				<view class="images">
					<image :src="item.icons" mode=""></image>
				</view>
				<view class="itmename">
					{{ item.title }}
				</view>
				<view class="itemfu">
					{{ item.right }}
				</view>
				<view class="righticon">
					<image :src="item.righticon" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	const contentlist = ref([
		{
			icons:'../../static/my-icon/成就.png',
			title:'我的成就',
			right:'156单',
			righticon:'../../static/my-icon/向右1.png',
			path:'/pages/mine/my-achievements/my-achievements'
		},
		{
			icons:'../../static/my-icon/2.png',
			title:'我填报的工单',
			right:'',
			righticon:'../../static/my-icon/向右1.png',
			path:'/pages/mine/completed-work-orders/completed-work-orders'
		},
		{
			icons:'../../static/my-icon/我的工单.png',
			title:'信息中心',
			right:'',
			righticon:'../../static/my-icon/向右1.png',
			path:'/pages/mine/information-center/information-center'
		},
		{
			icons:'../../static/my-icon/钥匙.png',
			title:'修改密码',
			right:'',
			righticon:'../../static/my-icon/向右1.png',
			path:'/pages/mine/edit-pwd/edit-pwd'
		},
		{
			icons:'../../static/my-icon/问题.png',
			title:'意见反馈',
			right:'',
			righticon:'../../static/my-icon/向右1.png',
			path:'/pages/mine/feedback/feedback'
		},
		{
			icons:'../../static/my-icon/升级中心.png',
			title:'版本更新',
			right:'当前版本：V1.1',
			righticon:'../../static/my-icon/向右1.png',
			path:''
		},
		{
			icons:'../../static/my-icon/关于我们.png',
			title:'关于我们',
			right:'',
			righticon:'../../static/my-icon/向右1.png',
			path:'/pages/mine/about/about'
		}
	])
	
	const pushs = (val)=>{
		uni.navigateTo({
			url:val
		})
	}
</script>

<style lang="less" scoped>
	.personals{
		height: 100vh;
		width: 100vw;
		.header{
			background-image: url('../../static/u395.png');
			background-size: 100% 100%;
			height: 25vh;
			width: 100%;
			box-sizing: border-box;
			padding: 10px;
			.top-title{
				width: 100%;
				text-align: center;
				view{
					display: inline-block;
				}
				.title-name{
					color: white;
					font-size: 40rpx;
				}
				.title-set{
					position: absolute;
					right: 10px;
					image{
						width: 45rpx;
						height: 45rpx;
					}
				}
			}
			.top-user{
				display: flex;
				.user-image{
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
						margin: 10px;
					}
				}
				.user-name{
					flex: 1;
					margin: 10px;
					color: white;
					position: relative;
					.name-num{
						position: absolute;
						bottom: 10px;
					}
				}
			}
		}
		.content{
			margin: 10px 0;
			view{
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
			.item{
				display: flex;
				height: 50px;
				align-items: center;
				border: 1px solid #d4d4d4;
				padding: 0 10px;
				.images{
					flex: 0.15;
					text-align: center;
				}
				.itmename{
					flex: 0.5;
				}
				.itemfu{
					flex: 0.3;
					text-align: center;
					font-size: 25rpx;
					color: #cbcbcb;
				}
				.righticon{
					flex: 0.05;
				}
			}
		}
	}
</style>
